<template>
    <el-dialog
        :title="configData.title"
        v-model="configData.open"
        width="1000px"
        :close-on-click-modal="false"
        append-to-body>
        <div>
            <el-form 
                :model="dataContainer.form" 
                ref="FormElRef" 
                :inline="true" 
                label-width="60px">
                <el-row :gutter="10" class="app-container-item">
                    <el-col :span="8">
                        <el-form-item label="合同名称" prop="contractName">
                            <el-input
                                v-model="dataContainer.form.contractName"
                                placeholder="请输入"
                                clearable
                                @clear="handleQuery"
                                @keyup.enter="handleQuery"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="希望方案提交时间" prop="expectProgramSubTime">
                            <el-date-picker
                                v-model="dataContainer.form.expectProgramSubTime"
                                type="datetime"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合同名称" prop="contractName">
                            <el-select
                                v-model="dataContainer.form.paymentStatus"
                                placeholder="请选择"
                                clearable
                            >
                                <el-option
                                    v-for="dict in bu_payment"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="">
                            <el-button 
                                type="primary" color="#BB2735" 
                                class="one-btn"
                                @click="handleQuery">
                                查询
                                <el-icon class="el-icon--right"><Search /></el-icon>
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                v-loading="dataContainer.loading"
                :data="dataContainer.list"
                @row-click="selectItem"
                border>
                <el-table-column 
                    type="index" 
                    fixed="left"
                    align="center" label="序号" width="80" />
                <el-table-column
                    label="合同主体"
                    align="center"
                    show-overflow-tooltip
                    width="200"
                    prop="contractSubjectName"/>
                <el-table-column
                    label="创建时间"
                    align="center"
                    prop="createTime"
                    show-overflow-tooltip
                    width="220"/>
                <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                    width="100"
                    class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button 
                            type="text" @click.stop="selectItem(scope.row)">
                            选中
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display:flex;justify-content:flex-end;">
                <el-pagination
                    class="pagination-container"
                    v-show="dataContainer.config.total > 0"
                    :total="dataContainer.config.total"
                    :background="true"
                    :current-page="dataContainer.params.pageNum"
                    :page-size="dataContainer.params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10, 20, 30, 50]"
                    :pager-count="7"
                    @size-change="(size)=>{
                        dataContainer.params.pageSize = size;
                        getDataList();
                    }"
                    @current-change="(page)=>{
                        dataContainer.params.pageNum = page;
                        getDataList();
                    }"/>
            </div>
        </div>
        <template #footer>
            <!-- <div class="dialog-footer">
                <el-button 
                    type="primary"
                    :disabled="!dataContainer.currentRow"
                    @click="onChange">
                    确 定
                </el-button>
                <el-button @click="configData.open=false">取 消</el-button>
            </div> -->
        </template>
    </el-dialog>
</template>

<script>
/**
 * 选择数据对话框
 * 数据由外部传入，然后操作完后返回出去，是否deppCopy由外部决定
 */
import { defineComponent,ref,getCurrentInstance,reactive,nextTick } from "vue";
import { list as peojectList } from "@/api/research/contract";
import { getDictItemLabel } from '@/common/OtherTools';

export default defineComponent({
    name:'SelectData',
    emits:['onChange'],
    setup(_,{emit}){
        const { proxy:instance } = getCurrentInstance();
        const configMap = {
            //配置信息，初始化时使用
            open: {
                oldValue: false,
            },
            title: {
                oldValue: '数据选择',
            },
            afterTitle: {
                oldValue: '',
            },
            isShow: {
                //是否只是展示
                oldValue: false,
            },
            beforChange: {
                //选择数据之前执行
                oldValue: false,
            },
        };
        const configData = reactive({});
        const dataContainer = reactive({
            loading:false,
            form:{},
            params:{  //基础参数
                pageNum: 1,
                pageSize: 10,
            },
            config:{
                total:0,
            },
            isBiddingList:[{label:'是',value:1},{label:'否',value:2}],  //是否招投标列表
            list: [],
            currentRow: null,  //当前选择的值
        });
        /** 初始化配置信息 */
        function initConfig(option = {}) {
            option = option || {};
            Object.keys(configMap).forEach(key => {
                //初始化一些配置信息
                if (option.hasOwnProperty(key)) {
                    configData[key] = option[key];
                } else {
                    if (typeof configMap[key].oldValue == 'function') {
                        configData[key] = configMap[key].oldValue();
                    } else {
                        configData[key] = configMap[key].oldValue;
                    }
                }
            });
        }
        initConfig();
        /** 初始化数据（外部调用） */
        function initData(show=true,params={},option={}){
            initConfig(option);
            dataContainer.form = {};
            configData.open = show;
            nextTick(()=>{
                dataContainer.form = params;
                setCurrent();
                getDataList();
            });
        }
        /** 数据查询 */
        function handleQuery(){
            dataContainer.params.pageNum = 1;
            getDataList();
        }
        /** 获取数据列表 */
        function getDataList() {
            dataContainer.loading = true;
            peojectList({
                ...dataContainer.form,
                ...dataContainer.params,
            }).then((res) => {
                dataContainer.list = res.rows || [];
                dataContainer.config.total = res.total;
            }).catch(()=>{
                return;
            }).finally(()=>{
                dataContainer.loading = false;
            });
        }
        /** 选择哪一行操作 */
        function selectItem(row){
            dataContainer.currentRow = row;
            onChange();
        }
        /** 确定选择 */
        function onChange(){
            configData.open = false;
            emit('onChange',dataContainer.currentRow);
        }
        return {
            configData,initData,getDataList,onChange,
            dataContainer,
            handleQuery,getDictItemLabel,selectItem,
        };
    },
});
</script>
